import React, { useCallback, useEffect, useState } from 'react'
import { Button, Divider, Dropdown, Flex, Input, Menu, Space, Tooltip, Typography } from 'antd'
import CommentList from '../../../component/CommentList'
import { Detail, apiGetPictureDetail } from '../../../api/detail'
import { Comment, apiGetCommentList, apiPostComment } from '../../../api/comment'
import { CommentOutlined, DownloadOutlined, EllipsisOutlined, LikeOutlined, MailOutlined, MobileOutlined, ShareAltOutlined, StarOutlined, WarningOutlined } from '@ant-design/icons'
import { apiPutLike } from '../../../api/like'
import { debounce } from '../../../util/tool'
import FovoritePictureFormModal from './FavoritePictureFormModal'
import { CreateFavoritePictureRequest, apiPostFavoritePicture } from '../../../api/favorite-picture'
import { useAppDispatch } from '../../../hooks/store'
import { fetchFavorites } from '../../../store/slice/favorite'
type PictureDetailProps = {
    id: number
}

const imgStyle: React.CSSProperties = {
    display: 'block',
    width: '70%',
    maxHeight: 750
}
const activeIconStyle: React.CSSProperties = {
    color: 'red'
}
const PublicPictureDetail: React.FC<PictureDetailProps> = ({ id }) => {
    const dispatch = useAppDispatch()
    const [detail, setDetail] = useState<Detail>()
    const [commentList, setCommentList] = useState<Comment[]>([])
    const [commentValue, setCommentValue] = useState<string>('')
    const [commentOpen, setCommentOpen] = useState<boolean>(false)
    const [fPOpen, setFPOpen] = useState<boolean>(false)
    const fetchDetail = useCallback(async () => {
        try {
            const d = await apiGetPictureDetail({ id: id })
            setDetail(d)
        } catch (error) {
            //nothing
        }
    }, [id])
    const fetchCommentList = useCallback(async () => {
        try {
            const cs = await apiGetCommentList({ pictureId: id })
            setCommentList(cs.list)
            console.log(cs)

        } catch (error) {
            //nothing
        }
    }, [id])
    const toggleLike = useCallback(async () => {
        try {
            const s = await apiPutLike({ pictureId: id })
            console.log(s)

        } catch (error) {
            //nothing
        }
    }, [id])
    const createComment = useCallback(async () => {
        try {
            const s = await apiPostComment({ pictureId: id, content: commentValue })
            console.log(s)

        } catch (error) {
            //nothing
        }
    }, [commentValue, id])
    const createFavoritePicture = useCallback(async (values: CreateFavoritePictureRequest) => {
        try {
            const s = await apiPostFavoritePicture({ pictureId: id, favoriteId: values.favoriteId })
            console.log(s)
            await fetchCommentList()
            await fetchDetail()
            setFPOpen(false)
        } catch (error) {
            //nothing
        }
    }, [fetchCommentList, fetchDetail, id])
    const onLikeClick = async () => {
        await toggleLike()
        await fetchDetail()
    }
    const onCommentConfirmClick = async () => {
        await createComment()
        await fetchCommentList()
        await fetchDetail()
        setCommentValue('')
        setCommentOpen(false)
    }
    const onFavoriteClick = () => {
        dispatch(fetchFavorites())
        setFPOpen(true)
    }
    useEffect(() => {
        fetchDetail()
        fetchCommentList()
    }, [fetchCommentList, fetchDetail])
    return (
        <>
            <FovoritePictureFormModal
                id={id}
                open={fPOpen}
                title={''}
                onOK={createFavoritePicture}
                onCancel={() => { setFPOpen(false) }} />
            <Flex>
                <img
                    alt={detail?.desc}
                    src={detail?.imageUrl}
                    style={imgStyle}
                />

                <Flex vertical style={{ padding: 32, width: '30%', height: 500, overflowX: 'hidden', overflowY: 'auto' }}>


                    <Typography.Title level={3}>
                        {detail?.title}
                    </Typography.Title>
                    <Typography.Text>
                        {detail?.desc}
                    </Typography.Text>
                    <Divider />
                    <CommentList data={commentList} />

                    <Input
                        onChange={(e) => {
                            setCommentValue(e.target.value)
                        }}
                        value={commentValue}
                        onClick={() => setCommentOpen(true)}
                        placeholder="整点骚话"
                    />
                    <br />
                    {commentOpen ?
                        <div>
                            <Button onClick={onCommentConfirmClick}>确定</Button>
                            <Button onClick={() => setCommentOpen(false)}>取消</Button>
                        </div> :
                        <Space>
                            <Tooltip title="点赞">
                                <Button onClick={debounce(onLikeClick, 200)} icon={<LikeOutlined style={detail?.likeState ? activeIconStyle : undefined} />} ><span> {detail?.likeCount || 0}</span></Button>

                            </Tooltip>
                            <Tooltip title="评论">
                                <Button icon={<CommentOutlined />} ><span>{detail?.commentCount}</span></Button>

                            </Tooltip>
                            <Tooltip title="收藏">
                                <Button onClick={onFavoriteClick} icon={<StarOutlined />} ><span>{detail?.favoriteCount}</span></Button>
                            </Tooltip>
                            <Tooltip title="分享">
                                <Button icon={<ShareAltOutlined />} />
                            </Tooltip>
                            <Tooltip title="下载">
                                <Button icon={<DownloadOutlined />} />
                            </Tooltip>
                            <Dropdown
                                placement="bottomRight"
                                overlay={
                                    <Menu
                                        items={[
                                            {
                                                key: '1',
                                                label: 'Report',
                                                icon: <WarningOutlined />,
                                            },
                                            {
                                                key: '2',
                                                label: 'Mail',
                                                icon: <MailOutlined />,
                                            },
                                            {
                                                key: '3',
                                                label: 'Mobile',
                                                icon: <MobileOutlined />,
                                            },
                                        ]}
                                    />
                                }
                                trigger={['click']}
                            >
                                <Button icon={<EllipsisOutlined />} />
                            </Dropdown>
                        </Space>
                    }


                </Flex>
            </Flex>
        </>
    )
}

export default PublicPictureDetail